<template>
    <div class="label" :style="{backgroundColor:labelColor}">
      {{way}}
      <div class="after" :style="{borderLeftColor:afterColor}"></div>
			<div class="top" :style="{borderRightColor:topColor}"></div>
			<div class="bottom" :style="{borderRightColor:bottomColor}"></div>
  </div>
    
</template>

<script>
export default {
  props:['way'],
  data(){
    return{
      labelColor:'',
      afterColor:'',
      topColor:'',
      bottomColor:''
    }
  },

  created() {
    this.chooseColor(this.way)
  },
  methods: {
    chooseColor(way){
      switch(way){
        case "全部" : this.renderColor("#CA97FE");break;
        case "vue" : this.renderColor("#41B883");break;
        case "node" : this.renderColor("#026E00");break;
        case "js" : this.renderColor("#FDD303");break;
        case "css" : this.renderColor("#0170E6");break;
        case "其他" : this.renderColor("#AB6173");break;
        case "随笔" : this.renderColor("#6a6a6a");break;
      }
    },
    renderColor(color){
      this.labelColor=color
      this.afterColor=color
      this.topColor=color
      this.bottomColor=color
    }
  },
}
</script>

<style lang="less" scoped>
			.label{
				position: absolute;
				width: 70px;
        height: 15px;
        text-align: center;
        line-height: 15px;
        font-size: 12px;
        font-weight: 600;
        // background-color: red;
        transition: all .4s;
        z-index: 5;
        &:hover{
          color: #fff;
          transform: translateX(20px);
        }
			}
			.after{
				content: '';
				position: absolute;
        left: 70px;
        top: 0;
				border-top:7.5px  solid;
				border-left: 15px solid;
				border-bottom: 7.5px solid;
				border-right: 15px solid;
				border-right-color: transparent !important;
				border-top-color: transparent !important;
				border-bottom-color: transparent !important;
			}
			.top{
				position: absolute;
				left: -30px;
				top: -7px;
				border-top:7.5px  solid;
				border-left: 15px solid;
				border-bottom: 7.5px solid;
				border-right: 15px solid;
				border-left-color: transparent !important;
				border-top-color: transparent !important;
				border-bottom-color: transparent !important;
			}
			.bottom{
				position: absolute;
				left: -30px;
				top: 7px;
				border-top:7px  solid;
				border-left: 15px solid;
				border-bottom: 7px solid;
				border-right: 15px solid;
        border-left-color: transparent !important;
				border-top-color: transparent !important;
				border-bottom-color: transparent !important;
        
			}
</style>